<template>
    <div>
            <div id="imgs">
                <van-image round width="20vw" height="20vw" src="/header.jpg" />
                <div class="title">{{ test }}</div>
            </div>
        <van-cell is-link title="个人资料" to="/zl" />
        <van-cell is-link title="修改密码" to="/changePass" />
        <van-cell is-link title="修改用户名" to="/username" />
        <van-cell is-link title="我的订单" to="/dingdan" />
        <van-cell is-link title="地址管理" to="/ress" />
        <van-cell is-link title="退出登录" @click="clicks" />
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { useGouwu } from '@/store/gouwu';
import { useMy } from '@/store/my';
const { proxy }: any = getCurrentInstance();
const router = useRouter();
const store = useGouwu();
const test = ref('');
const my = useMy();
// 当点击右侧退出按钮
const onClickRight = () => {
    // 清除购物车数据
    store.removeUse();
    // 清除账号信息
    localStorage.clear();
    // 弹回首页
    router.push({ name: 'admin' })
}

const clicks = ()=>{
    localStorage.removeItem("userId")
    localStorage.removeItem("token")
    router.push({name:"denglu"})
}
onBeforeMount(async() => {
    await my.fetchMyData()
    if (!localStorage.getItem('token')) {
        router.push({ name: 'denglu' })
    }
    if(my.zlData.username.length>0){
        test.value = my.zlData.username;
    }else{
        test.value = '暂无用户名'
    }
})
</script>


<style scoped lang="scss">
#imgs{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    margin-bottom: 10px;
    background-color: #1989fa;
    height: 170px;
    align-items: center;
    .title{
        margin-top: 20px;
        color: white;
        font-size: 20px;
    }
}
</style>